<template>
	<div class="my-salesman">
		<div class="top">
			<div class="headImg">
				<img src="../../../static/images/user-group.png" @click="$router.push('/temporaryDirector/addsalesman')">
			</div>
			<div class="title">
				<div class="title_hsz">{{userInfo.zhicheng}}</div>
				<div class="salesman-num">业务员 {{count}} 人</div>
			</div>
		</div>
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadSalesman">
			<div class="salesmanList_container">
				<!--循环体-->
				<div class="salesmanList_cycle" v-for="(item, index) in salesmanList" :key="index">
					<!--通知上部-->
					<div class="salesmanList_cycle_top">
						<div class="salesmanList_cycle_top_left" @click="eventClickJumpToEditSalesman(item)">
							<div class="img">
								<img v-if="item.pic" :src=item.pic>
								<img v-else src="../../../static/images/user-portrait.png">
							</div>
							<div class="name_tel">
								<div class="name">{{item.realname}}</div>
								<div class="tel">
									<img src="../../../static/images/phone-green.png">
									{{item.phone}}
								</div>
							</div>
						</div>
						<div class="salesmanList_cycle_top_right">
							<div class="salesman_profit">业务收益</div>
							<div class="salesman_profit_money"><span style="font-size: 1rem">￥</span>{{parseFloat(item.price).toFixed(1)}}</div>
						</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script>
	import { List } from 'vant';
	export default {
		name: "my-salesman",
		components: {
			[List.name]: List
		},
		computed: {
			userInfo() {
				return this.$store.state.options.user.oda
			}
		},
		data() {
			return {
				loading: false,
				finished: false,
				page: 0,
				list_rows: 10,
				salesmanList: [],
				count: 0
			}
		},
		methods: {
			getTemporary() {
				var url = '';
				this.$util.postRequestInterface()
			},
			onLoadSalesman() {
				var that = this;
				var url = '/api/home/user/getbyuser';
				var param = {
					token:this.$store.state.options.user.token,
					page: this.page,
					list_rows: this.list_rows
				};
				this.$util.postRequestInterface(url, param, (res) => {
					that.page = that.page + 1;
					that.count = res.data.count;
					if (res.data == '') {
						that.loading = false;
						that.finished = true;
					} else {
						for (let i of res.data.data) {
							that.salesmanList.push({
								pic: i.pic,
								realname: i.realname,
								phone: i.phone,
                                price: i.price,
                                oda: i
							});
						}
					}
					// // 加载状态结束
					that.loading = false;
					// // 数据全部加载完成
					if (that.salesmanList.length >= res.data.count) {
						that.finished = true;
					}
				})
            },
            eventClickJumpToEditSalesman(item) {
                this.$router.push({
                    name: 'TemporaryDirectorEditSalesmanPassword', params: item
                });
            }
		}
	}
</script>

<style lang="scss" scoped>
	.my-salesman {
		.top {
			width: 100%;
			height: 11rem;
			background: url("../../../static/images/back-green-bubble.png");
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			color: #fefefe;
			.headImg {
				margin: 1.9rem 3.6rem;
				img {
					width: 7.2rem;
					height: 7.2rem;
				}
			}
			.title {
				.title_hsz {
					font-size: 1.3rem;
					margin-bottom: 1rem;
				}
				.salesman-num {
					font-size: 2rem;
				}
			}
		}
		.salesmanList_container {
			width: 100%;
			.salesmanList_cycle {
				width: 90%;
				margin: 0 auto;
				padding: 0.4rem 0;
				.salesmanList_cycle_top {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #eeeeee;
					justify-content: space-between;
					padding: 0.6rem;
					.salesmanList_cycle_top_left {
						display: flex;
						align-items: center;
						.img {
							img {
								width: 4.4rem;
								height: 4.4rem;
								border-radius: 50%;
							}
						}
						.name_tel {
							padding-left: 1.8rem;
							font-size: 1.4rem;
							.name {
								color: #333333;
								padding-bottom: 0.2rem;
							}
							.tel {
								color: #00cc00;
								img {
									width: 1.3rem;
									height: 1.3rem;
								}
							}
						}
					}
					.salesmanList_cycle_top_right {
						font-size: 1.3rem;
						text-align: right;
						.salesman_profit {
							color: #999999;
							padding-bottom: 0.2rem;
						}
						.salesman_profit_money {
							color: #ff0000;
						}
					}
				}
			}
		}
	}
</style>
